<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>	
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">
</head>
<body>

<div class="main-wrapper">
<header>
	<nav>
	<div class="logo"><a href="#">陈陈陈</a></div>
		<ul>
		    	
			<li><a href="#">link1</a></li>
			<li><a href="#">link2</a></li>
			<li><a href="#">link3</a></li>
			<li><a href="#">link4</a></li>
		</ul>
	</nav>
	<div id="banner">
		<div class="inner">
			<h1>kenny, chen</h1>
			<p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
			<button>了解我</button>
			<div class="more">更多</div>

		</div>
	</div>
</header>
	<div id="content">

	    <section class="green-section">
	    	<div class="wrapper">
	    		<div>
	    			<h2>一个标题</h2>
	    			<div class="hr"></div>
	    			<p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi nulla, </p>
	    		</div>
	    		<div class="icon-group">
	    			<span class="icon">item1</span>
	    			<span class="icon">item2</span>
	    			<span class="icon">item3</span>
	    		</div>
	    	</div>
	    </section>
	    <section class="gray-section">
	    	<div class="article-preview">
	    		<div class="img-section">
	    			<img src="img/pic01.jpg"  alt="" />
	    		</div>
	    		<div class="text-section">
	    			<h2>又一个标题</h2>
	    			<p>
	    				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus dicta minima iste expedita, maiores aperiam deleniti magni, consequuntur vitae, architecto quasi ipsa. Id illo sunt obcaecati, praesentium ipsam culpa natus!
	    			</p>
	    		</div>
	    	</div>
	    	<div class="article-preview">
	    		
	    		<div class="text-section">
	    			<h2>又一个标题</h2>
	    			<p>
	    				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus dicta minima iste expedita, maiores aperiam deleniti magni, consequuntur vitae, architecto quasi ipsa. Id illo sunt obcaecati, praesentium ipsam culpa natus!
	    			</p>
	    		</div>
	    		<div class="img-section">
	    			<img src="img/pic02.jpg"  alt="" />
	    		</div>
	    	</div>
	    	
	    </section>
	    <section class="purple-section">
	    	<div class="wrapper">
	    		
	    		<div class="heading-wrapper">
	    		<h2>又一个标题</h2>
	    		<div class="hr"></div>
	    		<div class="sub-heading">
	    			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem voluptas, explicabo quod dolores officia quaerat fuga excepturi quo earum illum harum odio veritatis veniam! Ipsum sint veritatis assumenda dolores neque.
	    		</div>

	    	</div>
		<div class="card-group clearfix">
			<div class="card">
				<h3>又一个标题</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus facilis quidem commodi ipsa repellendus non porro, repudiandae neque aut accusamus quasi nam odio alias facere vitae doloremque explicabo qui voluptates!</p>
			</div>
			<div class="card">
				<h3>又一个标题</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus facilis quidem commodi ipsa repellendus non porro, repudiandae neque aut accusamus quasi nam odio alias facere vitae doloremque explicabo qui voluptates!</p>
			</div>
			<div class="card">
				<h3>又一个标题</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus facilis quidem commodi ipsa repellendus non porro, repudiandae neque aut accusamus quasi nam odio alias facere vitae doloremque explicabo qui voluptates!</p>
			</div>
			<div class="card">
				<h3>又一个标题</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus facilis quidem commodi ipsa repellendus non porro, repudiandae neque aut accusamus quasi nam odio alias facere vitae doloremque explicabo qui voluptates!</p>
			</div>
			<div class="card">
				<h3>又一个标题</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus facilis quidem commodi ipsa repellendus non porro, repudiandae neque aut accusamus quasi nam odio alias facere vitae doloremque explicabo qui voluptates!</p>
			</div>
			<div class="card">
				<h3>又一个标题</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus facilis quidem commodi ipsa repellendus non porro, repudiandae neque aut accusamus quasi nam odio alias facere vitae doloremque explicabo qui voluptates!</p>
			</div>
			
		</div>
	    	</div>
	    </section>

	</div>
<footer>
	<ul class="share-group">
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
	</ul>
<div class="cop">
	&copy  copy right kenny 2019
</div>
</footer>	
</div>
</body>
</html>